<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Twei的二次元首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://www.jq22.com/jquery/font-awesome.4.6.0.css" rel="stylesheet" media="screen">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="./css/mouse.css">
    <link rel="shortcut icon"
          href="https://cdn.jsdelivr.net/gh/Fuukei/Public_Repository@latest/vision/basic/favicon.ico">
    <script src="static/js/jquery-2.1.1.min.js"></script>
    <script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        body {
            background: linear-gradient(to bottom, #D3CCE3, #E9E4F0) no-repeat;
            background-size: 100% 100%;
            margin: 0;
            padding: 0;
        }

        .image1 {
            width: 35px;
            height: 35px;
            border-radius: 200px;
        }
    </style>
</head>
<body>
<div class="container mt-3">

    <div class="row">
        <div class="col-md-11 col-10">
            <!--导航栏元素-->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#home" style="color:#339af0">商品区</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#menu1" style="color:#339af0"
                       onclick="gouwu()">购物车</a>
                    <script>
                        function gouwu() {
                            layer.msg("尚未实现！", {icon: 2});
                        }
                    </script>
                </li>
            </ul>
        </div>

        <div class="col-md-1 col-2">
            <div class="dropdown">
                <img id="qq" class="img-fluid image1 dropdown-toggle"
                     src="https://q1.qlogo.cn/g?b=qq&nk=1559295172&s=100" data-bs-toggle="dropdown"/>
                <small class="text-end" style="font-size:3px;" id="username"></small>
                <script>
                    let username = decodeURI(document.URL).split('?')[1].split("=")[1];

                    let qq = $("#qq");
                    let qqname = $("#username");

                    function judgeuser(username) {
                        let resultdata = null;
                        $.each(JSON.parse(JSON.stringify(layui.data("twei").user)), function (index, item) {
                            if (username === item.username) {
                                resultdata = {qq: item.qq, auth: item.authority};
                            }
                        });
                        return resultdata;
                    }

                    let userdata = judgeuser(username);
                    if (userdata != null) {
                        qq.attr("src", "https://q1.qlogo.cn/g?b=qq&nk=" + userdata.qq + "&s=100");
                        qqname.text(username);
                    } else {
                        layer.msg("没有权限，违规进入！", {icon: 2}, function () {
                            // window.close();
                        });
                    }

                </script>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#"> <span class="d-inline-block bg-success rounded-circle"
                                                                 style="width: .5em; height: .5em;"></span> 功能待添加</a>
                    </li>
                    <li><a class="dropdown-item" href="#"><span class="d-inline-block bg-primary rounded-circle"
                                                                style="width: .5em; height: .5em;"></span> 敬请期待</a></li>
                    <li><a class="dropdown-item" href="#"> <span class="d-inline-block bg-info rounded-circle"
                                                                 style="width: .5em; height: .5em;"></span> 不见不散哈</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <div class="container mt-3">
        <div class="row">
            <div class="col-md-12 col-12">
                <marquee align="middle"
                         behavior="scroll"
                         scrollamount="5"
                         scrolldelay="100"
                         font="楷体_GB2312"
                         color="#66d9e8"
                         id="webnotice">
                </marquee>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <!--导航栏对应的元素切换-->
            <div class="tab-content">
                <div id="home" class="container tab-pane active"><br>

                    <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-8">
                            <div id="demo" class="carousel slide" data-bs-ride="carousel">

                                <div class="carousel-indicators">
                                    <button type="button" data-bs-target="#demo" data-bs-slide-to="0"
                                            class="active"></button>
                                    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
                                    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
                                </div>

                                <!-- The slideshow/carousel -->
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="./images/er1.jpg"
                                             class=" img-fluid d-block"
                                             style="width:100%">
                                        <div class="carousel-caption">
                                            <p>欢迎来到</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="./images/er2.jpg"
                                             class="img-fluid  d-block"
                                             style="width:100%">
                                        <div class="carousel-caption">
                                            <p>Acloudtwei</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="./images/er3.jpg"
                                             class="img-fluid d-block"
                                             style="width:100%">
                                        <div class="carousel-caption">
                                            <p>的小站！</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Left and right controls/icons -->
                                <button class="carousel-control-prev" type="button" data-bs-target="#demo"
                                        data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon"></span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#demo"
                                        data-bs-slide="next">
                                    <span class="carousel-control-next-icon"></span>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-2"></div>
                    </div>

                    <!--                        菜单一的编写-->
                    <div class="ct-pageWrapper">
                        <main>
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="widget">
                                            <h2 class="widget-header">购物车</h2>
                                            <div class="ct-cart"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div id="apps">
                                            <div class="row">
                                                <div class="col-sm-4" v-for="data in datas">
                                                    <div class="ct-product">
                                                        <div class="image">
                                                            <img v-bind:src=data.shopurl alt=""/>
                                                        </div>
                                                        <div class="inner"><a href="#"
                                                                              class="btn btn-motive ct-product-button"><i
                                                                class="fa fa-shopping-cart"></i></a>
                                                            <h2 class="ct-product-title">{{data.shopname}}</h2>
                                                            <p class="ct-product-description">{{data.shopdetail}}
                                                            </p><span
                                                                    class="ct-product-price">{{data.shopprice}}</span>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                            <script>
                                                const apps = Vue.createApp({
                                                    data() {
                                                        return {
                                                            datas: []
                                                        }
                                                    }
                                                })
                                                const vms = apps.mount('#apps')

                                                vms.datas = JSON.parse(JSON.stringify(layui.data("twei").shop));

                                                console.log(JSON.parse(JSON.stringify(layui.data("twei").shop)))

                                            </script>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </main>
                    </div>
                    </main>
                    <script src="js/shop.min.js"></script>
                    <script>
                        $('body').ctshop({
                            currency: '￥',
                            paypal: {
                                currency_code: 'EUR'
                            }
                        });
                    </script>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="container mt-3">
    <div class="row">
        <div class="col-md-4">
            <h4 style="color:#339af0">微博每日热搜</h4>
            <ol>
                <div id="app">
                    <li class="list-item" v-for="site in weibo">
                        {{site}}
                    </li>
                </div>
            </ol>
            <script>
                const app = Vue.createApp({
                    data() {
                        return {
                            weibo: []
                        }
                    }
                })
                const vm = app.mount('#app')
                let weiboname = [];
                $.get("https://tenapi.cn/resou/", function (data, status) {
                    let obj = jQuery.parseJSON(data);
                    if (status === "success") {
                        if (obj.data === 200) {
                            for (let i = 0; i < obj.list.length; i++) {
                                weiboname[i] = obj.list[i].name;
                            }
                            vm.weibo = weiboname;
                        }
                    }
                });

            </script>

        </div>
        <div class="col-md-4">
            <h4 style="color:#339af0">系统信息</h4>
            <dl>
                <dt>
                    网站名称
                </dt>
                <dd id="webname">

                </dd>
                <dt>
                    网站域名
                </dt>
                <dd id="webdomain">

                </dd>
                <dt>
                    作者
                </dt>
                <dd id="webauthor">
                </dd>
                <dt>
                    版权信息
                </dt>
                <dd id="webcopyright">
                </dd>
            </dl>
            <script>
                layui.use(['jquery'], function () {
                    var $ = layui.jquery;
                    let websetting = JSON.parse(JSON.stringify(layui.data("twei").web));
                    $("#webname").text(websetting.webname)
                    $("#webdomain").text(websetting.webdomain)
                    $("#webauthor").text(websetting.webauthor)
                    $("#webnotice").text(websetting.webnotice)
                    $("#webcopyright").text(websetting.webcopyright)
                });
            </script>

        </div>
        <div class="col-md-4">
            <div class="form-group">
                <h4 for="textareamessage" style="color:#339af0">
                    反馈信息
                </h4>
                <textarea type="email" class="form-control" style="border-color:white;"
                          id="textareamessage" rows="3"></textarea>
            </div>
            <button type="button" class="btn btn-outline-success" style="margin-top:10px;" onclick="submit()">
                提交反馈
            </button>

            <script>
                function submit() {
                    layer.msg("没有权限，违规进入！", {icon: 2});
                }
            </script>
        </div>
    </div>
</div>
</div>
<script src="js/lines.js"></script>
</body>
</html>
